<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>角色列表</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<link rel="stylesheet" href="css/sub-page.css">
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_693759_dgsnpaj0hzk.css">
<link rel="stylesheet" href="lib/nprogress/nprogress.css">
</head>
<body>
	<div class="ok-body">
		<!--面包屑导航区域-->
		<div class="ok-body-breadcrumb">
			<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>常用页面</cite></a>
				<a><cite>角色列表</cite></a>
			</span> <a class="layui-btn layui-btn-small"
				href="javascript:location.replace(location.href);" title="刷新">
				刷新 </a>
		</div>
		<!--模糊搜索区域-->
		<div class="layui-row">
			<form class="layui-form layui-col-md12 ok-search">
				<input class="layui-input" placeholder="请输入角色名" autocomplete="off"
					id="cname">
				<button class="layui-btn" lay-submit="" lay-filter="search">提交

				</button>
			</form>
		</div>
		<!--工具栏-->
		<okToolbar> <!-- <button class="layui-btn" id="addRole">
			<i class="layui-icon">&#xe61f;</i>添加角色
		</button> --> <span>共有数据：<i id="countNum"></i> 条
		</span> </okToolbar>
		<!--数据表格-->
		<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
	</div>
	<!--js逻辑-->
	<script src="lib/layui/layui.js"></script>
	<script src="lib/nprogress/nprogress.js"></script>
	<script>
		NProgress.start();
		window.onload = function() {
			NProgress.done();
		}

		layui
				.use(
						[ 'element', 'table', 'form', 'jquery', 'laydate' ],
						function() {
							var element = layui.element;
							var table = layui.table;
							var form = layui.form;
							var $ = layui.jquery;
							var laydate = layui.laydate;

							laydate.render({
								elem : '#startTime',
								type : "datetime"
							});

							laydate.render({
								elem : '#endTime',
								type : "datetime"
							});

							table.render({
								elem : '#tableId',
								url : 'findAllConsumer',
								limit : 10,
								page : true,
								cols : [ [ {
									type : 'checkbox'
								}, {
									field : 'id',
									title : '用户编号',
									width : 180,
									sort : true
								}, {
									field : 'name',
									title : '用户名',
									width : 150
								}, {
									field : 'pwd',
									title : '密码',
									width : 150
								}, {
									field : 'tel',
									title : '电话',
									width : 185
								}, {

									field : 'address',
									title : '地址',
									width : 200
								}, {
									title : '操作',
									width : 200,
									templet : '#operationTpl',
									align : 'center'
								} ] ],

								done : function(res, curr, count) {
									$("#countNum").text(count);

								}
							});

							form.on('submit(search)', function() {
								layer.msg('正在查询，请稍后...');
								var name = $("#cname").val();
								console.log(name + "----------");
								table.render({
									elem : '#tableId',
									url : 'findConsumerByCname?cname=' + name,
									limit : 10,
									page : true,
									cols : [ [ {
										type : 'checkbox'
									}, {
										field : 'id',
										title : '用户编号',
										width : 180,
										sort : true
									}, {
										field : 'name',
										title : '用户名',
										width : 150
									}, {
										field : 'pwd',
										title : '密码',
										width : 150
									}, {
										field : 'tel',
										title : '电话',
										width : 185
									}, {

										field : 'address',
										title : '地址',
										width : 200
									}] ],

									done : function(res, curr, count) {
										$("#countNum").text(count);

									}
								});
								return false;
							});

							table.on('tool(tableFilter)', function(obj) {
								var data = obj.data;
								var layEvent = obj.event;
								 if (layEvent === 'del') {

									layer.confirm("确定要删除吗？", {
										skin : 'layui-layer-lan',
										icon : 2,
										title : '提示',
										anim : 6
									}, function() {
										var cid = $("cid")
										$.ajax({
											url : "deleteConsumer?cid="
													+ data.id,
											type : "get",
											dataType : "text",
											success : function(msg) {
												console.log("删除成功")
											}
										})
										layer.msg("操作成功！", {
											icon : 1,
											time : 1000
										});
										
										table.render({
											elem : '#tableId',
											url : 'findAllConsumer',
											limit : 10,
											page : true,
											cols : [ [ {
												type : 'checkbox'
											}, {
												field : 'id',
												title : '用户编号',
												width : 180,
												sort : true
											}, {
												field : 'name',
												title : '用户名',
												width : 150
											}, {
												field : 'pwd',
												title : '密码',
												width : 150
											}, {
												field : 'tel',
												title : '电话',
												width : 185
											}, {

												field : 'address',
												title : '地址',
												width : 200
											}, {
												title : '操作',
												width : 200,
												templet : '#operationTpl',
												align : 'center'
											} ] ],

											done : function(res, curr, count) {
												$("#countNum").text(count);

											}
										});
										
										
									});
								} 
							});


						})
	</script>
	<!--模板-->
	<script type="text/html" id="operationTpl">
    
    <a href="javascript:;" title="删除" lay-event="del">删除</a>
</script>
</body>
</html>